<template>
  <div class="main">
    <ul v-show="haveList" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="20">
      <li v-for="item in data" @click="toDetail(item)">{{item.aka102}}</li>
    </ul>
    <div class="no_info" v-show="!haveList">
      <div><img src="../../assets/images/no_infor.png"/></div>
      <label>没有您所查询的数据！</label>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        name:this.$route.query.name,
        data:[],
        pageIndex:1,
        loading:true,
        haveList:true
      }
    },
    methods: {
      loadList(){
        this.$http.post("transmit/noauth",{
          transmitUrl: "/simis/threeCatalogues/queryServiceFacilitiesList",
          method: "get",
          aka102: this.name,
          pageNum: this.pageIndex,
          pageSize: 20,
          objectId: "d0836f108599442892392138a6bf7aad",
          objectType: "1"
        }).then(res => {
          console.log(res)
          if (res.body.total>0) {
            this.data = res.body.rows;
            if (res.body.rows.length < 20) {
              this.loading = true;
            }else {
              this.loading = false;
            }
          }else {
              this.haveList=false;
          }
        });
      },
      loadMore(){
        this.pageIndex++;
        this.$http.post("transmit/noauth",{
          transmitUrl: "/simis/threeCatalogues/queryServiceFacilitiesList",
          method: "get",
          aka102: this.name,
          pageNum: this.pageIndex,
          pageSize: 20,
          objectId: "d0836f108599442892392138a6bf7aad",
          objectType: "1"
        }).then(res => {
            console.log(res)
          if (res.success) {
            this.data.push.apply(this.data, res.body.rows);
            if (res.body.rows.length < 20) {
              this.loading = true;
            }else {
              this.loading = false;
            }
          }});
      },
      toDetail(item){
        this.$router.push({path:'/other/facilityDetail',query: {item: JSON.stringify(item)}})
      }
    },
    created(){
      this.loadList();
    }
  }
  document.body.style.background="#F8F7F6";
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="less" scoped>
  ul{background: #ffffff;}
  li{margin-left: 4%; min-height:55px; line-height: 55px;border-bottom: 1px solid #DFDFDF;
    background: url("../../assets/images/icon/icon-dhjt.png") no-repeat right 4% center;background-size: 22px;}
  .no_info{width: 100%;}
  .no_info>div{width: 40%;margin: 150px auto 20px auto;}
  img{width: 100%;height: 100%;}
  .no_info>label{display: block;text-align: center;width: 100%;}
</style>
